<template>
  <div class="table-wrapper">
    <div class="table-header">
      <div class="title">{{ $t('workplace.shopList') }}</div>
      <a-range-picker
        v-model="dateRange"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
        style="width: 260px"
        @change="handleDateChange"
      />
    </div>
    <a-table
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      :loading="loading"
      :bordered="false"
      size="mini"
      @page-change="onPageChange"
    />
  </div>
</template>

<script lang="ts">
  import { ref, onMounted } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { getShopStatistics } from '@/api/dashboard';
  import type {
    ShopStatisticsRecord,
    ShopStatisticsParams,
  } from '@/api/dashboard';
  import { Pagination } from '@/types/global';
  import dayjs from 'dayjs';

  export default {
    name: 'ShopList',
  };
</script>

<script lang="ts" setup>
  const { t } = useI18n();
  const dateRange = ref<[Date, Date]>();
  const loading = ref(false);
  const tableData = ref<ShopStatisticsRecord[]>([]);

  const basePagination: Pagination = {
    page: 1,
    limit: 10,
  };
  const pagination = ref({
    ...basePagination,
    total: 0,
  });

  const columns = [
    {
      title: '#',
      dataIndex: 'index',
      width: 80,
      align: 'center' as const,
      render: ({ rowIndex }) =>
        rowIndex + 1 + (pagination.value.page - 1) * pagination.value.limit,
    },
    {
      title: t('workplace.columns.shopName'),
      dataIndex: 'shop.name',
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: t('workplace.columns.shopSales'),
      dataIndex: 'receive_number',
      align: 'left' as const,
      render: ({ record }) => `¥${Number(record.receive_number).toFixed(2)}`,
      width: 150,
    },
    {
      title: t('workplace.columns.shopAddress'),
      dataIndex: 'shop.address',
      ellipsis: true,
      tooltip: true,
    },
  ];

  const handleDateChange = (e) => {
    pagination.value.page = 1;
    fetchData();
  };

  const fetchData = async () => {
    try {
      loading.value = true;
      const params: ShopStatisticsParams = {
        page: pagination.value.page,
        limit: pagination.value.limit,
      };
      if (dateRange.value) {
        params.start_time = dayjs(dateRange.value[0]).format(
          'YYYY-MM-DD HH:mm:ss'
        );
        params.end_time = dayjs(dateRange.value[1]).format(
          'YYYY-MM-DD HH:mm:ss'
        );
      }

      const { data } = await getShopStatistics(params);
      tableData.value = data.receive_number.data;
      pagination.value.total = data.receive_number.total;
    } catch (error) {
      console.error('获取门店统计数据失败:', error);
    } finally {
      loading.value = false;
    }
  };

  const onPageChange = (page: number) => {
    pagination.value.page = page;
    fetchData();
  };

  onMounted(() => {
    fetchData();
  });
</script>

<style scoped lang="less">
  .table-wrapper {
    padding-top: 16px;
    .table-header {
      margin-bottom: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 16px;
        font-weight: 500;
      }
    }

    :deep(.arco-table-cell) {
      padding: 12px 16px;
    }
  }
</style>
